<template>
  <div>
    <div class="orderList">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <router-link to="/">
            <button class="mint-button mint-button--default mint-button--normal">
              <span class="mint-button-icon">
                <i class="mintui mintui-back"></i>
              </span>
            </button>
          </router-link>
        </div>
        <h1 class="mint-header-title">我的订单</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
            </label>
          </button>
        </div>
      </header>
      <div class="orderGoods">
        <div class="orderIndex">
          <div class="c-title">上海一仓
            <span style="color:#F60;float:right;">待付款</span>
          </div>
          <div class="c-order">
            <div class="order-mid">
              <p>AS NIKE POWER SPEED CAPRIAS NIKE POWER SPEED CAPRI</p>
              <span>货号：AB45926</span><br>
              <span>尺码：36.5</span>
            </div>
            <img src="./../../assets/common/images/none-bg.jpg" alt="" class="pic">
            <div class="order-right">
              <p>￥399.00</p>
              <span class="count">￥699.00</span><br>
              <span>x1</span>
            </div>
          </div>
          <div class="c-order">
            <div class="order-mid">
              <p>AS NIKE POWER SPEED CAPRIAS NIKE POWER SPEED CAPRI</p>
              <span>货号：AB45926</span><br>
              <span>尺码：36.5</span>
            </div>
            <img src="./../../assets/common/images/none-bg.jpg" alt="" class="pic">
            <div class="order-right">
              <p>￥399.00</p>
              <span class="count">￥699.00</span><br>
              <span>x1</span>
            </div>
          </div>
          <div class="c-order">
            <div class="order-mid">
              <p>AS NIKE POWER SPEED CAPRIAS NIKE POWER SPEED CAPRI</p>
              <span>货号：AB45926</span><br>
              <span>尺码：36.5</span>
            </div>
            <img src="./../../assets/common/images/none-bg.jpg" alt="" class="pic">
            <div class="order-right">
              <p>￥399.00</p>
              <span class="count">￥699.00</span><br>
              <span>x1</span>
            </div>
          </div>
          <p class="orderPrice">共3件商品 合计：￥3200.00（含运费：15.00）</p>
          <div class="btn-box">
            <button>查看物流</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false
    }
  },
  watch: {},
  components: {
  },
  computed: {},
  methods: {}
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.orderList {
  min-height: 100vh;
  margin-top: 45px;
  header {
    height: 45px;
    background-color: #FFF;
    color: #000;
    border-bottom: 1px solid #ECECEC;
    z-index: 2!important;
  }
  .orderGoods {
    padding-top: 10px;
    padding-bottom: 40px;
    .orderIndex {
      background-color: #fff;
      margin-bottom: 10px;
      border-top: 1px solid #D4DCE1;
      border-bottom: 1px solid #D4DCE1;
      .c-title {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
      }
      .c-order {
        padding: 10px 100px;
        background-color: rgb(252, 252, 252);
        overflow: hidden;
        margin-bottom: 3px;
        .pic {
          position: relative;
          float: left;
          width: 70px;
          height: 85px;
          margin-left: -100%;
          left: -90px;
        }
        .order-mid {
          position: relative;
          float: left;
          width: 100%;
          height: 100%; //   line-height: 25px;
          p {
            line-height: 15px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          span {
            color: rgb(190, 190, 190);
            margin-top: 10px;
            display: inline-block;
          }
        }
        .order-right {
          text-align: right;
          position: relative;
          vertical-align: top;
          float: right;
          width: 65px;
          height: 100%;
          margin-left: -190px;
          right: -90px;
          line-height: 25px;
          span {
            color: rgb(190, 190, 190);
            float: right;
          }
          .count {
            text-decoration: line-through;
          }
          button {
            width: 65px;
            height: 25px;
            display: inline-block;
            border: 1px solid #CECECE;
            background-color: #F0F0F0;
            border-radius: 2px;
            margin-top: 15px;
          }
        }
      }
      .orderPrice {
        line-height: 50px;
        font-size: 14px;
        text-align: right;
      }
      .btn-box {
        text-align: right;
        height: auto;
        button {
          width: 65px;
          height: 25px;
          display: inline-block;
          color: #8B8B8B;
          border: 1px solid #CECECE;
          background-color: #fff;
          border-radius: 2px;
          margin-bottom: 15px;
          margin-right: 10px;
        }
        .orange {
          color: #F60;
          border-color: #F60;
        }
      }
    }
  }
}
</style>
